<template>
    <div>
      <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
      <a-modal 
        v-model:visible="visible" 
        @ok="onSubmit"
        okText="提交"
        cancelText="取消"
        :width="700"
        title="定额更改"
      >
        <!-- <div class="set-container"> -->
          <a-row class="first-row">
            <a-col :span="4" >专业名称：</a-col>
            <a-col :span="7">电力专业</a-col>
            <a-col :span="4">科室名称：</a-col>
            <a-col :span="5">电力技术科</a-col>
          </a-row>
          <a-row class="second-row">
            <a-col :span="4" class="bold-black">机构名称：</a-col>
            <a-col :span="7">{{formState.workshop_id}}
            <!-- <a-input v-model:value=formState.workshop_id :maxlength="10"/> -->
            </a-col>
            <a-col :span="4" >班组名称：</a-col>
            <a-col :span="5">{{formState.team_id}}
              <!-- <a-input v-model:value=formState.team_id :maxlength="10"/> -->
            </a-col>
          </a-row>
          <a-row class="third-row">
            
          </a-row>
          <a-row >
            <a-col :span="4" >定额数量：</a-col>
            <a-col>
              <button id="quantity-btn-style" @click="handleAdd">+</button>
            </a-col>
            <a-col class="quantity-border">{{count}}</a-col>
            <a-col>
              <button id="quantity-btn-style" @click="handleReduce">-</button>
            </a-col>
            <a-col>
              <button @click="handleReduceSure" class="reduceSureBtn">确定</button>
            </a-col>
          </a-row>
      </a-modal>
      <quotaReduce ref="showQuotaReduce" @handleCount="handleCount" :quotaReduceList="quotaReduceList" :quotaRecord="quotaRecord" :count="count"></quotaReduce>
    </div>
  </template>
  <script setup>
  import { ref,reactive, watch,onMounted} from 'vue';
  import { Form } from 'ant-design-vue'
  import request from '@/utils/request'
  import quotaReduce from '@/views/team2/electricModule/quotaProcess/quotaReduce.vue'
  import {GdQuotaApi} from '@/api/insulated-data/quota-process-data.js'


  onMounted(async()=>{
    // const result = await request.get(`/sys/getSubOrg`)
    // // console.log(result)
    // teamValue.value=result.data.data
  })

    const useForm = Form.useForm
    const visible = ref(false);

    //quotaReduce页面
    const showQuotaReduce=ref(null)
    const quotaReduceList=ref([])
    const quotaRecord=ref()

    const props=defineProps(['editValue','modifyId'])
    const count=ref()

    const emit=defineEmits(['loadData'])
    const showModal = () => {
        visible.value = true;
      };
      const handleOk = e => {
        // console.log(e);
        visible.value = false;
      };

      const formState = reactive({
        workshop_id: '',
        team_id:'',
        insulatedEquipment:'',
        count: '',
        unit: '',
      });

      watch(
        [
            () => props.editValue,
            () => props.modifyId
        ],
        async()=>{
         count.value=props.editValue.count
         quotaRecord.value= props.editValue
          // console.log(props.modifyId)
        //  const result = await request.get(`/changeQuota/deleteList`)
        //   console.log(result)
        //   teamValue.value=result.data.data
    })
      
    const onSubmit=()=>{
      emit('loadData') 
      visible.value=false
    }
    
    //加按键
    const handleAdd=()=>{
      count.value++

    }

    //减按键
    const handleReduce=()=>{
      count.value--
    }

    //子传父
    const handleCount=(value)=>{
      // console.log(typeof count)
      count.value=value
    }
    defineExpose({
      showModal
    })

    //确定按钮
    const handleReduceSure=async()=>{
      if(count.value > props.editValue.count){
        const result = await request({
          url:'/changeQuota/add',
          method:'post',
          data:{
            id:props.editValue.id,
            category:props.editValue.name,
            count:count.value
          }
        })
        emit('loadData')
        visible.value=false
      }else{
        showQuotaReduce.value.showModal()
        // for(var i=0;i < teamValue.value.length;i++){
        //     if(props.editValue.teamName===teamValue.value[i].orgName){
        //         orgId.value=teamValue.value[i].orgId
        //     }
        // }
        const result = await request({
          url:'/changeQuota/deleteList',
          method:'get',
          params:{
            orgId:props.modifyId,
            id:props.editValue.id
          }
          // params:{
          //   orgId:"1643230573200351234",
          //   id:17
          // }
        })
        // console.log(result)
        quotaReduceList.value=result.data.data
      }
    
      
    }
  </script>
  <style scoped>
  .ant-modal-body{
    font-size:18px;
  }
  .quantity-border{
    border: 1px solid #000;
    text-align: center;
    margin: 0 20px;
    width: 60px;
   
  }
  #quantity-btn-style{
    display: flex;
    background-color: white;
    border: 1px solid #000;
    width: 30px;
    justify-content: center;
    align-items: center;
  }


  .reduceSureBtn{
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    height: 30px;
    width: 80px;
    margin-left: 20px;
    background-color: #169bd5;
    color:white
  }
  
</style>